<script setup lang="ts">
import type { NavEntry } from './types'

withDefaults(
  defineProps<{
    items: NavEntry[]
  }>(),
  { items: () => [] }
)
</script>
<template>
  <div class="navbar-dropdown">
    <template v-for="(item, idx) in items">
      <hr v-if="item === '-'" :key="`nv-h-${idx}`" class="navbar-divider" />
      <a
        v-else-if="!item.children"
        :key="`nv-a-${idx}`"
        class="navbar-item"
        @click="item.onClick?.()"
      >
        <i v-if="item.icon" :class="item.icon" />
        {{ item.name }}
      </a>
      <div v-else :key="`nv-d-${idx}`" class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          <i v-if="item.icon" :class="item.icon" />
          {{ item.name }}
        </a>
        <NavBarDropDown :items="item.children" />
      </div>
    </template>
  </div>
</template>
